<template>
  <div class="beam-layout-container">
    <!-- 顶部查询条件 -->
    <div class="screen-conditions-container">
      <ScreenConditions :isDataType="false">
        <template slot="conditions">
          <a-input />
        </template>
        <template slot="operate">
          <a-button type="primary"> 查询 </a-button>
        </template>
      </ScreenConditions>
    </div>
    <div class="beam-table-container">
      <div class="table-header" header="环境监测">
        <div>
          <a-button type="primary"> 新增 </a-button>
        </div>
      </div>
      <div class="main">
        <vxe-table
          ref="xTable"
          height="99%"
          class="scrollbarStyle"
          align="center"
          show-overflow
          show-header-overflow
          :data="tableData"
          :column-config="{ resizable: true }"
        >
          <vxe-column type="seq" width="80" title="序号"></vxe-column>
          <vxe-column
            show-overflow
            :key="index"
            :title="item.title"
            :field="item.key"
            :width="item.width"
            v-for="(item, index) in columns"
          >
            <template #default="{ row }">
              <div>{{ row[item.key] }}</div>
            </template>
          </vxe-column>
          <vxe-column
            field="operate"
            width="220"
            title="操作"
            fixed="right"
            align="left"
          >
            <template #default="{ row }">
              <div class="text-button-group">
                <a-button type="link" @click="gotoView(row)"> 查看 </a-button>
                <a-button type="link" @click="gotoView(row)"> 编辑 </a-button>
                <a-button type="link" class="danger"> 删除 </a-button>
              </div>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
      <div class="pager-container">
        <vxe-pager
          background
          :current-page.sync="pager.page"
          :page-size.sync="pager.pageSize"
          :total="pager.total"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes', 'FullJump']"
          @page-change="paginationChange"
        >
          <template #left>
            <div class="vxe-pager-left-tip-container">
              第<span>1</span>到<span
                >{{ Math.ceil(pager.total / pager.pageSize) || 1 }}页 </span
              >共<span>{{ pager.total }}</span
              >条记录
            </div>
          </template>
        </vxe-pager>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      columns: [
        {
          title: "字段1",
          key: "",
        },
        {
          title: "字段2",
          key: "",
        },
        {
          title: "字段2",
          key: "",
        },
        {
          title: "字段3",
          key: "",
        },
        {
          title: "字段4",
          key: "",
        },
        {
          title: "字段5",
          key: "",
        },
      ],
      tableData: [{}],
      pager: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  methods: {
    gotoView() {},
    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
    },
  },
};
</script>

<style lang="less" scoped></style>
